<template>
  <div class="wt-date-time" :style="{color: d.color}">
    <div class="date">
      <!-- <div class="big"></div> -->
      <div v-if="isEnd">主题已结束</div>
      <div v-else>
        <div class="other ck-content" v-html="d.themeText" />
        <div class="other" :style="{fontSize:d.fontSize+'px'}">{{day}}天 {{hour}}时 {{minute}}分 {{second}}秒</div>
      </div>
    </div>
    <!-- <div class="time">{{hour}}:{{minute}}:{{minute}}</div> -->
  </div>
</template>

<script>
import TimeUpdate from '@/modules/corejs/time/time-update'

// function numfill (number) {
//   if (number < 10) {
//     return '0' + number
//   }
//   return number
// }

export default {
  props: {
    d: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      hour: '00',
      minute: '00',
      second: '00',

      year: '',
      month: '',
      day: '',

      isEnd: true
    }
  },
  created () {
    this.timeUpdate = new TimeUpdate()

    this.start()
  },
  methods: {
    update () {
      let remain = new Date(this.d.startDate) - new Date()
      let secondT = 1000
      let minuteT = secondT * 60
      let hourT = minuteT * 60
      let dayT = hourT * 24

      this.day = ~~(remain / dayT)

      let remainLessDay = remain % dayT // 小于1天的毫秒时间
      this.hour = ~~(remainLessDay / hourT)

      let remainLessHour = remainLessDay % hourT // 小于1小时的毫秒时间
      this.minute = ~~(remainLessHour / minuteT)

      let remainLessMinute = remainLessHour % minuteT // 小于1分钟的毫秒时间
      let second = this.second = ~~(remainLessMinute / secondT)
      if (second < 0) {
        this.isEnd = true
      } else {
        this.isEnd = false
      }
    },
    start () {
      this.update()
      this.timeUpdate.stop()
      if (this.isEnd === false) this.timeUpdate.start(() => { this.update() }, 1000)
    }
  },
  destroyed () {
    this.timeUpdate.stop()
  },
  watch: {
    'd.startDate' () {
      this.start()
    }
  }
}
</script>

<style scoped>
  .wt-date-time .other { font-size: 32px; }
</style>
